<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>在线留言</title>
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css">
    <link rel="stylesheet" href="/resource/js/front/index.css">
    <link rel="stylesheet" href="/resource/js/front/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <![endif]-->
</head>
<style>
    .whisper-user img {
        width: 40px;
        height: 40px;
        border: 1px solid #3e94ed;
        border-radius: 4px
    }

    .whisper-user span {
        color: #3e94ed;
    }

    .list-cont .cont img {
        width: 40px;
        height: 40px;
        border: 1px solid #3e94ed;
        border-radius: 4px
    }


</style>
<body>
<div th:replace="front/head :: heads"></div>
<div class="content whisper-content">
    <div class="cont">
        <div class="whisper-list">
            <div class="item-box" th:each="leaveWord:${leaveWordList}">
                <div class="item">
                    <div class="whisper-user">
                        <img th:src="${leaveWord.userImg}">
                        <span th:text="${leaveWord.userName}"></span>
                    </div>
                    <div class="whisper-title">
                        <i class="layui-icon layui-icon-date" style="color: #3e94ed"></i>
                        <span class="hour" th:text="${#strings.substring(leaveWord.time,11,19)}">12:25</span>
                        <span class="date" th:text="${#strings.substring(leaveWord.time,0,11)}">2018/06/08</span>
                    </div>
                    <p class=" text-cont" th:utext="${leaveWord.content}"></p>
                    <div class="op-list">
                        <p class="like" th:id="${leaveWord.id}"><i
                                class="layui-icon layui-icon-praise"></i><span
                                th:text="${leaveWord.likeCount}">1200</span></p>
                        <p class="edit"><i class="layui-icon layui-icon-reply-fill"></i><span
                                th:text="${leaveWord.count}"></span></p>
                        <p class="delete" style="margin-left: 50px;cursor: pointer" th:id="${leaveWord.id}"><i
                                class="layui-icon layui-icon-delete"></i><span></span></p>
                        <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
                    </div>
                </div>
                <div class="review-version layui-hide">
                    <div class="form">
                        <form class="layui-form" action="">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <textarea name="desc" class="layui-textarea" id="replyContent"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="text-align: right;">
                                    <button class="layui-btn definite" th:id="${leaveWord.id}">確定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="list-cont" th:each="answering:${leaveWord.answeringList}">
                        <div class="cont">
                            <div class="img">
                                <img th:src="${answering.userImg}">
                            </div>
                            <div class="text">
                                <p class="tit"><span class="name" th:text="${answering.userName}"
                                                     style="color: #3e94ed">吳亦凡</span><span
                                        class="data" th:text="${#strings.substring(answering.time,0,19)}"
                                        style="color: #3e94ed">2018/06/06</span></p>
                                <p class="ct" th:utext="${answering.content}"></p>
                                <p class="deleteAnswering" style="margin-top:20px;cursor: pointer"
                                   th:id="${answering.id}"><i
                                        class="layui-icon layui-icon-delete"></i><span></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <textarea id="leaveWordContent" class="layui-textarea fly-editor"></textarea>
        <span style="color: #3e94ed;cursor: pointer" id="leaveWord-submit-btn">提交留言</span>
    </div>
</div>
<script type="text/html" id="laytplCont">
    <div class="cont">
        <div class="img">
            <img src="{{d.avatar}}" alt="">
        </div>
        <div class="text">
            <p class="tit"><span class="name">{{d.name}}</span><span class="data">2018/06/06</span></p>
            <p class="ct">{{d.cont}}</p>
        </div>
    </div>
</script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/resource/js/front/util/'
    }).use(['element', 'laypage', 'form', 'layedit', 'menu'], function () {
        element = layui.element, laypage = layui.laypage, $ = layui.$, layedit = layui.layedit, form = layui.form, menu = layui.menu;
        laypage.render({
            elem: 'demo'
            , count: 70 //数据总数，从服务端得到
        });
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '/layeditUpload.do',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: '10240'
            }
            , uploadVideo: {
                url: '/layeditUpload.do',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: '20480'
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            , calldel: {
                url: '/Attachment/DeleteFile'
            }
            //开发者模式 --默认为false
            , devmode: true
            //插入代码设置
            , codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            }
            , tool: [
                'face', 'link', 'image_alt',]

        });
        var index = layedit.build('leaveWordContent', {
            height: 200 //设置编辑器高度
        });
        //提交留言功能
        $('#leaveWord-submit-btn').on('click', function () {
            var content = layedit.getContent(index);
            $.ajax({
                url: '/leaveWord/leaveWord.do',
                type: 'post',
                data: {"content": content},
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        layer.alert("留言成功!", {
                            time: 2000,
                            end: function () {
                                location.reload()
                            }
                        })
                    } else {
                        layer.msg("留言失败!")
                    }
                }
            });
        })
        //回复留言功能
        $('.definite').on('click', function () {
            var id = $(this).attr("id");
            var textarea = $(this).parents('.layui-form-item').siblings('.layui-form-text').children('.layui-input-block').children('textarea');
            var content = $(textarea).val();
            $.ajax({
                url: '/leaveWord/answering.do',
                type: 'post',
                data: {"content": content, "leaveId": id},
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        layer.alert("回复成功!", {
                            time: 2000,
                            end: function () {
                                location.reload()
                            }
                        })
                    } else {
                        layer.msg("回复失败!")
                    }
                }
            });
        });
        //删除留言功能
        $('.delete').on('click', function () {
            //留言id
            var id = $(this).attr("id");
            console.log(id);
            $.ajax({
                url: '/leaveWord/leaveWord.do',
                type: 'post',
                data: {_method: "DELETE", "id": id},
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        layer.alert("删除成功!", {
                            time: 2000,
                            end: function () {
                                location.reload()
                            }
                        })
                    } else {
                        layer.msg("删除失败!")
                    }
                }
            });
        })
        //删除留言回复功能
        $('.deleteAnswering').on('click', function () {
            //留言回复id
            var id = $(this).attr("id");
            console.log(id);
            $.ajax({
                url: '/leaveWord/answering.do',
                type: 'post',
                data: {_method: "DELETE", "id": id},
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        layer.alert("删除成功!", {
                            time: 2000,
                            end: function () {
                                location.reload()
                            }
                        })
                    } else {
                        layer.msg("删除失败!")
                    }
                }
            });
        })
        //点赞
        $('.like').on('click', function () {
            //留言id
            var id = $(this).attr("id");
            console.log(id);
            $.ajax({
                url: '/leaveWord/getALike.do',
                type: 'post',
                data: {"leaveId": id},
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        layer.alert(result.msg, {
                            time: 2000,
                            end: function () {
                                location.reload()
                            }
                        })
                    } else {
                        layer.msg(result.msg)
                    }
                }
            });
        })
        menu.init();
        menu.off();
        menu.submit()
    })
</script>
</body>
</html>